@extends('layouts.console_header')

@section('title', '统计概况')

@section('resources')
    @parent
    <!-- css 文件 -->
    <style>
        .all_count{margin-left: 25px;width: 96%;}
        .all_count td{padding: 10px 0;}
        .all_count td p{width: 100%;text-align: center;color: #808080;font-size: 20px;}
        .statistical_count li .title{border-left: 3px solid #9955c6;padding-left: 22px;font-size: 20px;margin: 20px 5px;}
        .statistical_count li{background-color: #fff;margin: 20px 0;padding: 10px 0 20px;}
        .user_order_count{position: relative;height: 200px;margin-top: 20px;}
        .user_count{width: 540px;position: absolute;top: 0;left: 50px;}
        .order_count{width: 540px;position: absolute;top: 0;right: 50px;}
        .user_count td{text-align: center;padding: 10px 0;color: #808080;font-size: 20px;}
        .order_count td{text-align: center;padding: 10px 0;color: #808080;font-size: 20px;}
        #select_day{position: absolute;top: 0;left: 0;z-index: 6;opacity: 0;height: 22px;width: 167px;}
        .show_date{position: absolute;top: 0;left: 0;border: 1px solid #808080;z-index: 3;height: 20px;width: 135px;padding: 0 15px;font-size: 16px;color: #666;}
        .select_icon{position: absolute;top: 8px;right: 10px;border: 6px solid #666;border-color: #666 transparent transparent transparent;z-index: 5;}
    </style>
@endsection

@section('content')
<section class="user_list">
	<div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
        <p class="fz_14 account_title fl" style="border: none;"><span style="color: #7f7f7f;"><a href="/console/index">首页</a>>数据报表></span><span class="co_violet">统计概况</span></p>
    </div>
    <ul class="statistical_count">
        <li>
            <p class="title">总计数据</p>
            <table border="1" bordercolor="#808080" class="all_count">
                <tr>
                    <td class="oh">
                        <p class="fl">累计用户数</p>
                        <p class="fl">{{$totalusercount}}</p>
                    </td>
                    <td class="oh">
                        <p class="fl">累计在线商家数</p>
                        <p class="fl">{{$totalshopcount}}</p>
                    </td>
                    <td class="oh">
                        <p class="fl">累计订单数</p>
                        <p class="fl">{{$totalordercount}}</p>
                    </td>
                    <td class="oh">
                        <p class="fl">累计订单金额</p>
                        <p class="fl">{{$totalorderamount}}</p>

                    </td>
                    <td class="oh">
                        <p class="fl">累计评论数</p>
                        <p class="fl">{{$totalcommentcount}}</p>
                    </td>
                </tr>
            </table>
        </li>
        <li>
            <p class="title">用户与订单</p>
            <div>
                <p class="oh">
                    <h3 class="fl" style="margin-left: 30px;">折线图</h3>
                    <span class="fl" style="color: #E4616F;margin-left: 120px;">——订单数</span>
                    <span class="fl" style="color: #31C8EE;margin-left: 30px;">——用户数</span>
                    <div class="fl" style="margin-left: 200px;position: relative;width: 170px;">
                        <input class="show_date" type="text" readonly="" value="">
                        <span class="select_icon"></span>
                        <select id="select_day">
                            <option value="7">近7天</option>
                            <option value="15">近15天</option>
                            <!-- <option value="30">近30天</option> -->
                        </select>
                    </div>
                </p>
                <div class="box-body">
                    <div class="chart" style="padding: 0 30px;">
                        <canvas id="lineChart" style="width: 1140px;margin: 10px 0;" width="1140" height="350"></canvas>
                    </div>
                </div>
            </div>
            <div class="user_order_count">
                <table border="1" bordercolor="#808080" class="user_count">
                    <tr>
                        <td rowspan="4">用户数</td>
                        <td>今天新增用户数</td>
                        <td>{{$todayusercount}}</td>
                    </tr>
                    <tr>
                        <td>昨天新增用户数</td>
                        <td>{{$yesterdayusercount}}</td>
                    </tr>
                    <tr>
                        <td>近7天新增用户数</td>
                        <td>{{$sevendayusercount}}</td>
                    </tr>
                    <tr>
                        <td>近30天新增用户数</td>
                        <td>{{$thirtydayusercount}}</td>
                    </tr>
                </table>
                <table border="1" bordercolor="#808080" class="order_count">
                    <tr>
                        <td rowspan="4">订单数</td>
                        <td>今天新增订单数</td>
                        <td>{{$todayordercount}}</td>
                    </tr>
                    <tr>
                        <td>昨天新增订单数</td>
                        <td>{{$yesterdayordercount}}</td>
                    </tr>
                    <tr>
                        <td>近7天新增订单数</td>
                        <td>{{$sevendayordercount}}</td>
                    </tr>
                    <tr>
                        <td>近30天新增订单数</td>
                        <td>{{$thirtydayordercount}}</td>
                    </tr>
                </table>
            </div>
        </li>
    </ul>
</section>
@endsection

@section('scriptResources')
    @parent
    <script src="{{env('JS_DOMAIN')}}js/Chart.js?v={{env('JS_VERSION')}}"></script>
<script>
    'use strict';
    var cityid='{{$cityid}}';
    var dailyChartData = new Array();
    show_chart();
    
    //选择天数
    $("#select_day").change(function() {
        show_chart();
    });
    function show_chart() {
        var select_day = $("#select_day").find("option:selected").val();
        $.ajax({
            url: '/console/statistical/chart',
            type: 'GET',
            async: true,
            data: {
                cityid:cityid,
                day:select_day
                },
            dataType: 'json',
            timeout: 5000,
            cache: false,
            error: function(err){
                console.log("get sales charts data failure. " + err);
            },
            success: function(data){
                if (data['status'] == 'success') {
                    dailyChartData = data['data'];
                    var selectDateCount = dailyChartData.timeaxis.length;
                    $(".show_date").val(dailyChartData.timeaxis[0]+'——'+dailyChartData.timeaxis[selectDateCount-1])
                    var areaChartData = {
                        labels: dailyChartData['timeaxis'],
                        datasets: [
                            {
                                label: "user",
                                fillColor: "rgb(0,192,239)",
                                strokeColor: "rgb(0,192,239)",
                                pointColor: "rgb(0,192,239)",
                                pointStrokeColor: "#c1c7d1",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgb(0,192,239)",
                                data: dailyChartData['user']
                            },
                            {
                                label: "order",
                                fillColor: "rgba(221,57,75,0.9)",
                                strokeColor: "rgba(221,57,75,0.8)",
                                pointColor: "#DD394B",
                                pointStrokeColor: "rgba(221,57,75,1)",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(221,57,75,1)",
                                data: dailyChartData['order']
                            }
                        ]
                    };

                    var areaChartOptions = {
                        //Boolean - If we should show the scale at all
                        showScale: true,
                        //Boolean - Whether grid lines are shown across the chart
                        scaleShowGridLines: false,
                        //String - Colour of the grid lines
                        scaleGridLineColor: "rgba(0,0,0,.05)",
                        //Number - Width of the grid lines
                        scaleGridLineWidth: 1,
                        //Boolean - Whether to show horizontal lines (except X axis)
                        scaleShowHorizontalLines: true,
                        //Boolean - Whether to show vertical lines (except Y axis)
                        scaleShowVerticalLines: true,
                        //Boolean - Whether the line is curved between points
                        bezierCurve: true,
                        //Number - Tension of the bezier curve between points
                        bezierCurveTension: 0.3,
                        //Boolean - Whether to show a dot for each point
                        pointDot: false,
                        //Number - Radius of each point dot in pixels
                        pointDotRadius: 4,
                        //Number - Pixel width of point dot stroke
                        pointDotStrokeWidth: 1,
                        //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
                        pointHitDetectionRadius: 20,
                        //Boolean - Whether to show a stroke for datasets
                        datasetStroke: true,
                        //Number - Pixel width of dataset stroke
                        datasetStrokeWidth: 2,
                        //Boolean - Whether to fill the dataset with a color
                        datasetFill: true,
                        //String - A legend template
                        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
                        //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                        maintainAspectRatio: true,
                        //Boolean - whether to make the chart responsive to window resizing
                        responsive: true
                    };

                //-------------
                //- LINE CHART -
                //--------------
                    var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
                    var lineChart = new Chart(lineChartCanvas);
                    var lineChartOptions = areaChartOptions;
                    lineChartOptions.datasetFill = false;
                    lineChart.Line(areaChartData, lineChartOptions);
                } else {
                    return;
                }
            }
        });
    }

</script>
@endsection